﻿<%@ Page Language="C#" MasterPageFile="~/Views/Shared/SiteTemplate.Master" AutoEventWireup="True"
    CodeBehind="Detail.aspx.cs" Inherits="LoveMusic.StoryDetailView" %>

<%@ Import Namespace="LoveMusic" %>
<%@ Import Namespace="GSearch" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
    <% var story = ((StoryDetailData)ViewData.Model).Story; %>
    <title>
        <%=Server.HtmlEncode(story.Title)%>
        -
        <%=Server.HtmlEncode(story.ArtistName) %>
        -
        <%=Server.HtmlEncode(story.Category.ToLower()) %>
        - Listen on IloveThisMusic.com</title>
    <meta name="description" content="Listen song <%=Server.HtmlEncode(story.Title)%> by <%=Server.HtmlEncode(story.ArtistName)%> in your web browser." />
    <meta name="keywords" content="<%=Server.HtmlEncode(story.Title)%>,<%=Server.HtmlEncode(story.ArtistName)%>, <%=Server.HtmlEncode(story.Category) %>,ilovethismusic,song,music,watch,listen,share,rate,download,new music" />
    <script type="text/javascript" src="/cache/cachecontent/JavaScriptIncludeArtist/1/javascript"
        temp_src="/cache/cachecontent/JavaScriptIncludeArtist/1/javascript"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2/swfobject.js"></script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
    <% var story = ((StoryDetailData)ViewData.Model).Story; %>
    <% if (story == null) %>
    <% { %>
    <span class="pageMessage">The song does not exists.</span>
    <% } %>
    <% else %>
    <% { %>
    <script type="text/javascript">
    $(function() {
    // Tabs
    $('#tabs').tabs();
});
        // YouTube JavaScript Player With Playlist
        // http://911-need-code-help.blogspot.com/2009/10/youtube-javascript-player-with-playlist.html
        // Revision 1 [2009-10-12]
        //
        // Prerequisites
        // 1) Create following elements in your HTML:
        // -- a) ytplayer: a named anchor
        // -- b) ytplayer_div1: placeholder div for YouTube JavaScript Player
        // -- c) ytplayer_div2: container div for playlist
        // 2) Include SWFObject library from http://code.google.com/p/swfobject/
        //
        // Variables
        // -- ytplayer_playlist: an array containing YouTube Video IDs
        // -- ytplayer_playitem: index of the video to be played at any given time
        //
        var limitCounterSongs=1;
        var currentAddedSongNumber=0;
        var ytplayer_playlist = [];
        var ytplayer_playitem = 0;
        swfobject.addLoadEvent(ytplayer_render_player);
        swfobject.addLoadEvent(ytplayer_render_playlist);
        function ytplayer_render_player() {
            swfobject.embedSWF
    (
      'http://www.youtube.com/v/' + ytplayer_playlist[ytplayer_playitem] + '&enablejsapi=1&rel=0&fs=1&showinfo=1&iv_load_policy=3',
      'ytplayer_div1',
      '425',
      '344',
      '8',
      null,
      null,
      {
          allowScriptAccess: 'always',
          allowFullScreen: 'true'
      },
      {
          id: 'ytplayer_object'
      }
    );
        }
        
        function ytplayer_addOneSong(start){
                var link = document.createElement("img");
                var img = document.createElement("img");
                img.src = "http://img.youtube.com/vi/" + ytplayer_playlist[start] + "/default.jpg";
                
                var a = document.createElement("a");
                a.setAttribute('id','image-'+start);
                a.setAttribute("class", "copy");
                
                a.href = "#ytplayer";
                a.onclick = (
                                function(j) {
                                                return function() 
                                                {
                                                    ytplayer_playitem = j;
                                                    ytplayer_playlazy(1000);
                                                };
                                            }
                              )(start);
                a.appendChild(img);
                document.getElementById("ytplayer_div2").appendChild(a);
                
                if (currentAddedSongNumber < start)
                    currentAddedSongNumber =start;
        }
        
        function ytplayer_removeOneSong(start){
                var a = document.getElementById('image-'+start);
                if (a)
                    document.getElementById("ytplayer_div2").removeChild(a);
        }
        
        
        function ytplayer_render_playlist() {
            var i=1;
            var counterReached =0;
            while (counterReached<2) 
            {
                if (ytplayer_playlist[i]!='')
                {
                    ytplayer_addOneSong(i);
                    counterReached++;
                }
                i++;
            }
        }
        function ytplayer_playlazy(delay) {
            //
            // Thanks to the anonymous person posted this tip:
            // http://www.tipstrs.com/tip/1084/Static-variables-in-Javascript
            //
            if (typeof ytplayer_playlazy.timeoutid != 'undefined') {
                window.clearTimeout(ytplayer_playlazy.timeoutid);
            }
            ytplayer_playlazy.timeoutid = window.setTimeout(ytplayer_play, delay);
        }
        
        function ytplayer_play() {
        
            var o = document.getElementById('ytplayer_object');
            var breakReached= false;
            if (o) {
                if (ytplayer_playlist[ytplayer_playitem]!='')
                {
                    o.loadVideoById(ytplayer_playlist[ytplayer_playitem]);
                
              
              
                    // Add song only if it's a new song
                    if (ytplayer_playitem+1>currentAddedSongNumber)
                    {
                         while (!breakReached)
                         {
                                if (ytplayer_playlist[ytplayer_playitem+1] != '')
                                {
                                    ytplayer_addOneSong(ytplayer_playitem+1);
                                    // If limit reached remove song starting from first
                                    if (ytplayer_playitem > limitCounterSongs)
                                        ytplayer_removeOneSong(ytplayer_playitem - limitCounterSongs-1);
                                    
                                    breakReached = true;
                                }
                                else
                                {
                                    ytplayer_playitem++;
                                    limitCounterSongs++;
                                }
                          }
                    }
                 }
                 else
                 {
                                    ytplayer_playitem++;
                 }
            }
        }
        //
        // Ready Handler (this function is called automatically by YouTube JavaScript Player when it is ready)
        // * Sets up handler for other events
        //
        function onYouTubePlayerReady(playerid) {
            var o = document.getElementById('ytplayer_object');
            if (o) {
                o.addEventListener("onStateChange", "ytplayer_statechange");
                o.addEventListener("onError", "ytplayer_error");
            }
        }
        //
        // State Change Handler
        // * Sets up the video index variable
        // * Calls the lazy play function
        //
        function ytplayer_statechange(state) {
            if (state == 0) {
                ytplayer_playitem += 1;
                ytplayer_playitem %= ytplayer_playlist.length;
                ytplayer_playlazy(5000);
            }
        }
        //
        // Error Handler
        // * Sets up the video index variable
        // * Calls the lazy play function
        //
        function ytplayer_error(error) {
            if (error) {
                ytplayer_playitem += 1;
                ytplayer_playitem %= ytplayer_playlist.length;
                ytplayer_playlazy(5000);
            }
        }
        //
        // Add items to the playlist one-by-one
        //
        <% foreach (string youTubeID in story.PlayListYouTube) %>
        <% { %>
                    ytplayer_playlist.push('<%= youTubeID  %>');
        <% } %>
    </script>
    <div id="tabs" style="margin-bottom: 35px;">
        <ul>
            <li><a href="#tabs-listen">
                <%= Server.HtmlEncode(story.ArtistName)%>
                radio</a></li>
            <li><a href="#tabs-overview">Song detail</a></li>
            <li><a href="#tabs-watch">
                <%= Server.HtmlEncode(story.ArtistName)%>
                video radio</a></li>
            <li><a href="#tabs-download">Download</a></li>
        </ul>
        <div id="tabs-listen">
            <h3>
                Listen
                <%= Server.HtmlEncode(story.ArtistName)%>
                and similar artist/bands.</h3>
            <div id="sliki" class="sliki" style="float: left; margin-right: 20px;">
                <% if (ViewData.Model.UserName == "Administrator")  %>
                <%{ %>
                <%= Html.ActionLink("DELETE", "DeleteStory")%>
                <%} %>
                <div class="count_detail">
                    <%if (story.ImageID != 0) %>
                    <%{ %>
                    <%=  Html.Image(Url.Content("~/Song/Image/" + story.ImageID + "/250/250"),"missing image",null)%>
                    <%} %>
                    <%  else %>
                    <% {%>
                    <%= Html.Image(Url.Content("~/Views/Images/error.gif"),"missing image", new { width = "250", height = "250" })%>
                    <%} %>
                </div>
            </div>
            <div style="margin-top: 8px;">
                <object type="application/x-shockwave-flash" data="/player_mp3_multi.swf" width="470"
                    height="250">
                    <param name="movie" value="/player_mp3_multi.swf" />
                    <param name="bgcolor" value="#000024" />
                    <param name="FlashVars" value="mp3=<%= story.Playlist.Url %>&amp;title=<%=story.Playlist.Title %>&amp;width=470&amp;height=250&amp;showvolume=1&amp;buttonwidth=36&amp;sliderwidth=40&amp;sliderheight=12&amp;volumewidth=45&amp;volumeheight=13&amp;loadingcolor=0f1cff&amp;bgcolor=000024&amp;bgcolor1=360000&amp;bgcolor2=000000&amp;slidercolor1=900203&amp;slidercolor2=ed0103&amp;sliderovercolor=fffff0&amp;buttoncolor=ed0103&amp;buttonovercolor=fffffa&amp;playlistalpha=75&amp;currentmp3color=ff0000&amp;scrollbarcolor=fb0000&amp;scrollbarovercolor=ffffff" />
                    <p>
                        You must have flash enabled
                    </p>
                </object>
            </div>
        </div>
        <div id="tabs-overview" style="text-align: left; min-height: 300px;">
            <div style="float: left; width: 70%;">
                <div class="title2">
                    <span class="titleForDetail">
                        <%= Server.HtmlEncode(story.Title)%></span>
                    <%if (story.Mp3Files != null && story.Mp3Files.Length > 0) %>
                    <% { %>
                    <object type="application/x-shockwave-flash" data="/player_mp3_maxi.swf" width="200"
                        height="20">
                        <param name="movie" value="/player_mp3_maxi.swf" />
                        <param name="FlashVars" value="mp3=<%=  story.Mp3Files[0].UrlHandler  %>" />
                    </object>
                    <%} %>
                    <div>
                        <%--<%= Html.ActionLink<ArtistController>(c => c.Index(story.ArtistName.Replace(" ","+")), story.ArtistName)%>--%>
                        <%=Html.ActionLink(Server.HtmlDecode(story.ArtistName), "Index", "Artist", new { artistName = story.ArtistName.Replace(" ", "+") },null)%>
                    </div>
                    <div class="timestamp" style="float: left;">
                        <% if (story.IsPublished) %>
                        <% {%>
                        <%= "published "%>
                        <span class="time">
                            <%= story.PublishedAgo%></span> ago,
                        <% }%>
                        posted by <a href="<%= Url.Action("PostedBy", "Song", new { name = story.PostedBy.Name.UrlEncode(), page = 1 })%>">
                            <%--  <img alt="" src="http://www.gravatar.com/avatar.php?gravatar_id=<%= story.PostedBy.GravatarID %>&size=15"
                                                class="gravatar" />--%>
                            <%= Server.HtmlEncode(story.PostedBy.Name)%>
                        </a><span class="time">
                            <%= story.PostedAgo%></span> ago
                    </div>
                </div>
                <br />
                Why I love this song:
                <%= Server.HtmlEncode(story.Description)%>
                <div class="summary">
                    <span class="category">category:</span>
                    <%=Html.ActionLink(story.Category, "Category", "Song", new { name = story.Category.UrlEncode(), page = 1 }, null)%>
                </div>
                <br />
                <div id="tags">
                    <span class="tags"><span class="text">tags:</span>
                        <% for (int i = 0; i < story.Tags.Length; i++) %>
                        <% { %>
                        <%     string tag = story.Tags[i]; %>
                        <%     if (i > 0) %>
                        <%     { %>
                        <%=         ", "%>
                        <%     } %>
                        <%--<%=     Html.ActionLink<SongController>(c => c.Tag(tag.UrlEncode(), 1), Server.HtmlEncode(tag))%>--%>
                        <%=      Html.ActionLink(tag.UrlEncode(), "Tag", "Song", new { name = Server.HtmlEncode(tag), page = 1 }, null) %>
                        <% } %>
                    </span>
                </div>
                    <div>
                Voted by:
                <%  foreach (UserItem votedBy in story.VotedBy) %>
                <%  {  %>
                <span class="user"><a href="<%= Url.Action("PostedBy", "Song", new { name = votedBy.Name.UrlEncode(), page = 1 })%>">
                    <%= Server.HtmlEncode(votedBy.Name)%>
                </a></span>
                <%  } %>
                </div>
                <div class="sharing">
                    <!-- AddThis Button BEGIN -->
                    <script type="text/javascript">                        var addthis_pub = "Ta4ka";</script>
                    <a href="http://www.addthis.com/bookmark.php" onmouseover="return addthis_open(this, '', '[URL]', '[TITLE]')"
                        onmouseout="addthis_close()" onclick="return addthis_sendto()">
                        <img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="130" height="16"
                            border="0" alt="" /></a><script type="text/javascript" src="http://s7.addthis.com/js/152/addthis_widget.js"></script>
                    <!-- AddThis Button END -->
                </div>
            </div>
            <div style="float: right;">
                <div class="kigg" style="float: right;">
                    <div class="count">
                        <span id="loveCount">
                            <%=story.VoteCount.ToString()%></span>
                        <br />
                        loves
                    </div>
                    <div id="lovingInDetails" style="display: none;">
                        <div id="loveIt" class="it" style="display: <%= ((story.HasVoted) ? "none" : string.Empty) %>">
                            <a href="javascript:void(0)" onclick="javascript:Story.love(<%=story.ID %>, <%=story.VoteCount %>, 'loveCount', 'loveIt', 'loved', 'loving')">
                                love it</a>
                        </div>
                        <div id="loved" class="ed" style="display: <%= ((story.HasVoted) ? string.Empty : "none") %>">
                            loved!
                        </div>
                        <div id="loving" class="ing" style="display: none">
                            wait...
                        </div>
                    </div>
                </div>
            
            
            </div>
        </div>
    <div id="tabs-watch">
        <div id="divPlayer" style="float: left;">
            <a name="ytplayer"></a>
            <div id="ytplayer_div1">
                You need Flash player 8+ and JavaScript enabled to view this video.</div>
        </div>
        <div id="ytplayer_div2" style="position: relative; width: 150px; height: 400px; overflow: auto;">
            <h3 class="title">
                NEXT</h3>
        </div>
    </div>
    <div id="tabs-download">
        <% if (story.Mp3Files.Length == 0) %>
        <%{ %>
        <h4>
            No mp3 file sources found in our database. Use the <a href="javascript:void(0)" onclick="javascript:Story.showSubmit()">
                advanced search</a> method to search over the internet and add the song.</h4>
        <br />
        <%}
           else%>
        <%{ %>
        <% string mp3ListForMulti = string.Empty; %>
        <% string mp3Titles = string.Empty; %>
        <% for (int i = 0; i < story.Mp3Files.Length; i++)%>
        <%  { %>
        <div id="divMp3Player" class="mp3player">
            <a href="javascript:void(0)" onclick="javascript:Story.downloadSong(<%= story.Mp3Files[i].Mp3File_ID.ToString() %>,<%= story.ID.ToString() %>)">
                Download mp3:
                <%=Server.HtmlDecode(story.Mp3Files[i].Title)%></a>
            <object type="application/x-shockwave-flash" data="/player_mp3_maxi.swf" width="200"
                height="20">
                <param name="movie" value="/player_mp3_maxi.swf" />
                <param name="FlashVars" value="mp3=<%=  story.Mp3Files[i].UrlHandler  %>" />
            </object>
        </div>
        <%  } %>
        <%} %>
    </div>
    </div>
    <div id="underTabs" style="padding: 20px; margin: 20px;">
        <div>
            <div id="fb-root">
            </div>
            <script src="http://connect.facebook.net/en_US/all.js#appId=185427214821739&amp;xfbml=1"></script>
            <fb:comments numposts="10" width="700" publish_feed="true">
            </fb:comments>
        </div>
    </div>
    <% } %>
</asp:Content>
